<template>
  <a-card :bordered="false">
    <div class="base-info">
      <a-space align="start" :size="60">
        <a-upload
          :action="action"
          :headers="headers"
          name="avatarFile"
          :show-upload-button="true"
          :show-file-list="false"
          @success="uploadSuccess"
        >
          <template #upload-button>
            <a-avatar
              :size="100"
              class="info-avatar"
              :style="userStore.avatar ? { backgroundColor: '#fff' } :{ backgroundColor: '#3370ff' }"
            >
              <template #trigger-icon>
                <icon-camera />
              </template>
              <img v-if="userStore.avatar" :src="userStore.avatar" />
              <span v-else>{{ $t('subTitle') }}</span>
            </a-avatar>
          </template>
        </a-upload>
        <a-descriptions
          :data="renderData"
          :column="3"
          align="right"
          layout="inline-horizontal"
          :label-style="{
          width: '140px',
          fontWeight: 'normal',
          color: 'rgb(var(--gray-8))',
        }"
          :value-style="{
          width: '200px',
          paddingLeft: '8px',
          textAlign: 'left',
        }"
        >
          <template #label="{ label }">{{ $t(label) }} :</template>
          <template #value="{ value, data }">
            <span>{{ value }}</span>
          </template>
        </a-descriptions>
      </a-space>
      <icon-close :size="20" style="cursor: pointer; margin-right: 20px" @click="goBack" />
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store';
import type { DescData } from '@arco-design/web-vue/es/descriptions/interface';
import { getToken } from '@/utils/auth';

const router = useRouter();
const userStore = useUserStore();

const action = ref(import.meta.env.VITE_API_BASE_URL + '/sys-user/avatar');
const headers = ref({ Authorization: 'Bearer ' + getToken() });

// 用户数据
const renderData = ref<DescData[]>([]);

const goBack = () => {
  router.go(-1);
};

// 上传头像成功
const uploadSuccess = (resp: any) => {
  const res = resp.response;
  if (res.code != 200) {
    return;
  }
  const data = res.data;
  userStore.setAvatar(data.fileUrl);
};

// 初始化数据
const initData = () => {
  renderData.value = [
      {
        label: 'userSetting.label.accountId',
        value: userStore.id,
      },
      {
        label: 'userSetting.label.username',
        value: userStore.username,
      },
      {
        label: 'userSetting.label.name',
        value: userStore.name,
      },
      {
        label: 'userSetting.label.tel',
        value: userStore.tel,
      },
      {
        label: 'userSetting.label.email',
        value: userStore.email,
      },
      {
        label: 'userSetting.label.deptName',
        value: userStore.deptName,
      },
      {
        label: 'userSetting.label.registrationDate',
        value: userStore.createTime,
      },
      {
        label: 'userSetting.label.loginDate',
        value: userStore.loginTime,
      },
    ];
}
initData();

// 监听数据变化
watch(
  userStore,
  (newValue, oldValue) => {
    initData();
  },
  { deep: true }
);
</script>

<style scoped lang="less">
.arco-card {
  padding: 14px 0 4px 4px;
  border-radius: 4px;
}
.base-info {
  display: flex;
  justify-content: space-between;
}
:deep(.arco-avatar-trigger-icon-button) {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-color: #e8f3ff;
  .arco-icon-camera {
    margin-top: 8px;
    color: rgb(var(--arcoblue-6));
    font-size: 14px;
  }
}
</style>
